<template>
  <div id="app">
    <transition :name="'pop-' + (direction === 'forward' ? 'in' : 'out')">
      <keep-alive :exclude="exclude">
        <router-view class="router-view">
        </router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import factory from './factory'
export default {
  data () {
    return {
      exclude: ''
    }
  },
  computed: {
    ...mapGetters({
      loading: 'getLoading',
      direction: 'getDirection'
    })
  },
  mounted () {
    let routes = this.$router.options.routes, arr = []
    for (let i = 0; i < routes.length; i++) {
      if (!routes[i].keepAlive) {
        arr.push(routes[i].name)
      }
    }
    if (arr.length > 0) {
      this.exclude = arr.join(',')
    }

    this.$root.goBack = () => {
      let path = this.$route.path
      if (path === '/') {
        factory.exit()
      } else {
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import "css/style.less";
  // 在这里引入mint-ui的样式
  @import "css/mint-ui.css";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}
.router-view {
  width: 100%;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  backface-visibility: hidden;
}
.pop-out-enter-active,
.pop-out-leave-active,
.pop-in-enter-active,
.pop-in-leave-active {
  will-change: transform;
  height: 100%;
  position: absolute;
  left: 0;
}
.pop-out-enter-active {
  animation-name: popInLeft;
}
.pop-out-leave-active {
  animation-name: popOutRight;
}
.pop-in-enter-active {
  animation-name: popInRight;
}
.pop-in-leave-active {
  animation-name: popOutLeft;
}
@keyframes popInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutLeft {
  from {
    opacity: 1;
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes popInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
</style>
